<template>
	<div class="noticestyle">
<!-- 		标题
		<h2>{{ datas.text }}</h2> -->

		<!-- 公告 -->
		<el-form label-width="80px" :model="$store.state.$currentproperties" :rules="rules" size="small" label-position="right">

			<el-form-item label="公告内容"  prop="noticeText">
				<el-input v-model="$store.state.$currentproperties.noticeText" placeholder="请输入公告" />
			</el-form-item>


			<!-- 背景颜色 -->
			<el-form-item label="背景颜色" >
				<!-- 颜色选择器 -->
				<el-color-picker v-model="$store.state.$currentproperties.backColor" show-alpha class="picke" :predefine="predefineColors">
				</el-color-picker>
			</el-form-item>


			<!-- 文字颜色 -->
			<el-form-item label="文字颜色" >
				<!-- 颜色选择器 -->
				<el-color-picker v-model="$store.state.$currentproperties.textColor" show-alpha class="picke" :predefine="predefineColors">
				</el-color-picker>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'noticestyle',
		props: {
			// datas: Object,
		},
		data() {
			return {
				rules: {
					//校验表单输入
					noticeText: [
						//页面名称
						{
							required: true,
							message: '请输入公告',
							trigger: 'blur'
						},
					],
				},
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
			}
		},
	}
</script>

<style scoped lang="less">
	.noticestyle {

		/* 颜色选择器 */
		.picke {
			float: right;
		}
	}
</style>